<!DOCTYPE HTML>
<html lang="zh">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>PC网站布局</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        .page-wrap {
            display: flex;
            min-height: 100vh;
            flex-flow: column nowrap;
        }

        main{
            display: flex;
            flex-flow:row nowrap;
            flex: 2;
        }

        nav{
            flex: 0 0 20px;
            background: blue;
        }

        header,
        footer {
            flex: 0 0 80px;
            background: red;
        }

        aside{
            flex: 0 0 100px;
            background: #333;
        }

        section{
            flex: 1;
            background: #999;
        }
        
    </style>
</head>
<body class="page-wrap">
    <header>

    </header>
    <nav>

    </nav>
    <main>
        <section>
    
        </section>
        <aside>
            
        </aside>
    </main>
    <footer>

    </footer>
</body>